<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.box, ul {
				/* 解决换行被解析的问题 */
				font-size: 0;
			}



			.box>* {
				display: inline-block;
				vertical-align: middle;
			}

			.box li {
				display: inline-block;
				width: 46px;
				height: 64px;
				/*border: 2px solid black;*/
				font-size: 12px;
				position: relative;
				margin: 0 10px;
			}

			p {
				position: absolute;
				bottom: 0;
				width: 80px;
				text-align: center;
				/*background-color: blue;*/
				left: -17px;
				line-height: 14px;
				/*font-weight: 300;*/
			}

			li span {
				display: inline-block;
				width: 46px;
				height: 46px;
				/*background-color: yellow;*/
				background-repeat: no-repeat;
				background-image: url("img/sprites.png");
			}

			.pig {
				background-position: -13px -17px;
			}

			.mkf {
				background-position: -80px -17px;
			}

			.bag {
				background-position: -141px -17px;
			}

			.pen {
				background-position: -209px -17px;
			}

			.star {
				background-position: -272px -17px;
			}

			.bag2 {
				background-position: -582px -17px;
			}

			.mes {
				background-position: -649px -17px;
			}

			.mon {
				background-position: -719px -17px;
			}

			.wx {
				background-position: -789px -17px;
			}

			.house {
				background-position: -865px -17px;
			}


			.center {
				width: 223px;
				height: 62px;
				background: url("img/sprites.png") no-repeat -332px -9px;
				margin: 0 28px;
			}

			.box {
				text-align: center;
				width: 960px;
				margin:0 auto;
			}

		</style>
	</head>
	<body>
		
		<div class="box">
			<ul>
				<li>
					<span class="pig"></span>
					<p>美食</p>
				</li>
				<li>
					<span class="mkf"></span>
					<p>夜店</p>
				</li>
				<li>
					<span class="bag"></span>
					<p>购物</p>
				</li>
				<li>
					<span class="pen"></span>
					<p>文化</p>
				</li>
				<li>
					<span class="star"></span>
					<p>休闲</p>
				</li>
			</ul>
			<div class="center">
			</div>
			<ul>
				<li>
					<span class="bag2"></span>
					<p>烧客空间</p>
				</li>
				<li>
					<span class="mes"></span>
					<p>知道分子</p>
				</li>
				<li>
					<span class="mon"></span>
					<p>白吃白拿</p>
				</li>
				<li>
					<span class="wx"></span>
					<p>烧客论坛</p>
				</li>
				<li>
					<span class="house"></span>
					<p>企业俱乐部</p>
				</li>
			</ul>
		</div>

	</body>
</html>